<style>
    body {}

    .aui-bar-tab {
        color: #666;
    }

    .aui-bar-tab .aui-bar-tab-label {
        font-size: 11px;
        line-height: 0.75rem;
    }

    .aui-bar-tab .aui-active {
        color: #F04040;
    }

    .aui-bar {
        min-height: 2.45rem;
        border-top: 1px solid #f1f1f1;
    }
    .aui-bar-tab .aui-bar-tab-item {
        padding-top: 0.3rem;
    }
    .aui-bar-tab .aui-bar-tab-item .aui-iconfont {
        height: 0.925rem;
    }

    .aui-icon-one {
        display: inline-block;
        height: 0.925rem;
        width: 0.975rem;
        background: url('__IMG__/nav/nav11.png') no-repeat center center;
        background-size: 0.925rem 0.975rem;
    }

    .aui-bar-tab .aui-active .aui-icon-one {
        display: inline-block;
        height: 0.925rem;
        width: 0.975rem;
        background: url('__IMG__/nav/nav10.png') no-repeat center center;
        background-size: 0.925rem 0.975rem;
    }

    .aui-icon-two {
        display: inline-block;
        height: 0.8rem;
        width: 0.925rem;
        background: url('__IMG__/nav/nav22.png') no-repeat center center;
        background-size: 0.925rem 0.8rem;
    }

    .aui-bar-tab .aui-active .aui-icon-two {
        display: inline-block;
        height: 0.8rem;
        width: 0.925rem;
        background: url('__IMG__/nav/nav20.png') no-repeat center center;
        background-size: 0.925rem 0.8rem;
    }

    .aui-icon-three {
        display: inline-block;
        height: 0.9rem;
        width: 0.875rem;
        background: url('__IMG__/nav/nav33.png') no-repeat center center;
        background-size: 0.875rem 0.9rem;
    }

    .aui-bar-tab .aui-active .aui-icon-three {
        display: inline-block;
        height: 0.9rem;
        width: 0.875rem;
        background: url('__IMG__/nav/nav30.png') no-repeat center center;
        background-size: 0.875rem 0.9rem;
    }

    .aui-badge {
        display: inline-block;
        text-align: center;
        font-size: 0.5rem;
        min-width: 0.65rem;
        height: 0.8rem;
        line-height: 0.8rem;
        padding: 0.0rem;
        color: #fff;
        border: 1px solid #F04040;
        background-color: #F04040;
        border-radius: 50%;
        position: absolute;
        top: 0.2rem;
        right: 23px;
        z-index: 99;
    }
</style>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item" tapmode>
        <span class="aui-iconfont aui-icon-one"></span>
        <div class="aui-bar-tab-label" onclick="foot_index()">首页</div>
    </div>
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="aui-iconfont aui-icon-two"></i>
        <div class="aui-bar-tab-label" onclick="foot_car()">购物车</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-three"></i>
        <div class="aui-bar-tab-label" onclick="foot_my()">我的</div>
    </div>
</footer>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script>
    $('body').css('padding-bottom','2.45rem');
    function foot_index() {
        location.href = '{:url("home/Index/index")}';
    }
    function foot_car() {
        location.href = '{:url("home/Car/index")}';
    }
    function foot_my() {
        location.href = '{:url("home/My/index")}';
    }
</script>